<script lang="ts" setup>
import oaMenuForm from "./oa-menu-form.vue"

const emit = defineEmits<{
    (event: "add", value: any): void
    (event: "edit", value: any): void
}>()

const props = withDefaults(
    defineProps<{
        modular: string
        subItem?: any
    }>(),
    {
        modular: "edit",
        subItem: {}
    }
)

const menuFormEditRef = shallowRef()
const menuFromPopupRef = shallowRef()

const form = {
    name: "",
    type: "view",
    url: "",
    appid: "",
    pagepath: ""
}

watchEffect(() => {
    if (Object.keys(props.subItem).length != 0) {
        for (const key in form) {
            //@ts-ignore
            form[key] = props.subItem[key]
        }
    }
})

const handleRules = async () => {
    await menuFormEditRef.value.menuFormRef.validate()
    if (props.modular === "edit") {
        emit("edit", { ...form })
    } else {
        emit("add", { ...form })
    }
    menuFromPopupRef.value.close()
    menuFormEditRef.value.menuFormRef.resetFields()
}
</script>

<template>
    <popup ref="menuFromPopupRef" async :clickModalClose="false" :title="`${modular === 'add' ? '新增' : '编辑'}子菜单`" @confirm="handleRules">
        <oa-menu-form
            ref="menuFormEditRef"
            modular="secondary"
            v-model:name="form.name"
            v-model:visitType="form.type"
            v-model:url="form.url"
            v-model:appId="form.appid"
            v-model:pagePath="form.pagepath"
        ></oa-menu-form>
        <template #trigger>
            <slot></slot>
        </template>
    </popup>
</template>
